<template>
  <view class="container">
    <view class="order-header">
     
      <uni-button type="primary" @click="printReceipt">打印小票</uni-button>
    </view>
    <view class="order-preview" id="printableArea">
      <view class="shop-name">{{ order.shop_name }}</view>
      <view class="order-info">
        <view class="info-item">
          <text>订单编号：</text>
          <text>{{ order.order_number }}</text>
        </view>
        <view class="info-item">
          <text>订单时间：</text>
          <text>{{ order.order_time }}</text>
        </view>
        <view class="info-item">
          <text>会员卡号：</text>
          <text>{{ order.member_card }}</text>
        </view>
        <view class="info-item">
          <text>会员姓名：</text>
          <text>{{ order.member_name }}</text>
        </view>
      </view>
      <view class="order-items">
        <view class="item-header">
          <text class="item-name">商品名称</text>
          <text class="item-quantity">数量</text>
          <text class="item-price">单价</text>
          <text class="item-total">小计</text>
        </view>
        <view v-for="item in items" :key="item.id" class="order-item">
          <text class="item-name">{{ item.product_name }}</text>
          <text class="item-quantity">{{ item.quantity }}</text>
          <text class="item-price">￥{{ item.price }}</text>
          <text class="item-total">￥{{ item.total }}</text>
        </view>
      </view>
      <view class="order-summary">
        <text>商品总数：{{ totalQuantity }}</text>
        <text>订单总额：￥{{ order.total_amount }}</text>
        <text>整单优惠：￥{{ order.discount_amount }}</text>
        <text>实收金额：￥{{ order.received_amount }}</text>
      </view>
      <hr style="color: darkgray; margin: 5px;">
      <view class="info-item">
        <text>医生：</text>
        <text>{{ order.operator }}</text>
      </view>
      <view class="info-item">
        <text>备注：</text>
        <text>{{ order.note }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order: {},
      items: [],
      orderId: null
    };
  },
  computed: {
    totalQuantity() {
      return this.items.reduce((sum, item) => sum + item.quantity, 0);
    }
  },
  methods: {
    async fetchOrderDetails() {
      const res = await this.$myRuquest({
        url: '/index/plugin.orders/getOrderDetails',
        method: 'GET',
        data: {
          order_id: this.orderId
        }
      });

      if (res.data.code === 200) {
        this.order = res.data.data.order;
        this.items = res.data.data.items;
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    printReceipt() {
      const printContent = document.getElementById('printableArea').innerHTML;
      const originalContent = document.body.innerHTML;

      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
      window.location.reload();
    }
  },
  onLoad(options) {
    this.orderId = options.order_id;
    this.fetchOrderDetails();
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  //justify-content: center;
  padding: 20px;
  height: 100vh;
  background-color: #fff;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.order-preview {
  width: 58mm;
  padding: 10px;
  font-size: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
}

.shop-name {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
}

.order-info {
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.order-items {
  margin-bottom: 10px;
}

.item-header, .order-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}

.item-name, .item-quantity, .item-price, .item-total {
  width: 25%;
  text-align: center;
}

.order-summary {
  font-size: 12px;
  font-weight: bold;
  text-align: right;
}

.order-summary text {
  display: block;
  text-align: right;
}

@media print {
  .container, .order-header {
    display: none;
  }
  .order-preview {
    margin: 0;
  }
}
</style>
